/* eslint-disable */
import React, { useEffect, useState } from 'react';
import { Carousel, Card, Layout, Typography } from 'antd';
import { Link } from 'react-router-dom';
import './home.css';
// import LazyLoad from 'react-lazyload';
import { getAllArticles } from '../../api/ArticleDetailIndex';
import {
  UserOutlined,
  TeamOutlined,
  ScheduleOutlined,
  VideoCameraOutlined,
  WarningOutlined,
  FileTextOutlined,
  HomeOutlined,
  CheckCircleOutlined,
  BellOutlined,
} from '@ant-design/icons';

const { Meta } = Card;
const { Sider, Content } = Layout;
const { Text } = Typography;

const Home = () => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchArticles = async () => {
      try {
        await getAllArticles();
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchArticles();
  }, []);

  const cardContents = [
    { title: '多措并举促进学生心理健康（人民时评）', description: '心理健康是人生成就和幸福的重要基石。近年来，心理健康问题逐渐延伸至青少年群体，并呈现“低龄化”趋势。加强青少年心理健康教育已成为全社会的共识。', image: require("../../assets/images/7.jpg"), articleId: 1 },
    { title: '心理健康教育：构建学生全面心灵防护网', description: '心理健康教育旨在构建一个全面而细致的学生心灵防护网，通过系统性的教育与干预措施，促进学生心理健康的发展与维护。', image: require("../../assets/images/8.jpg"), articleId: 2 },
    { title: '基于社会心理学的校园霸凌干预对策', description: '基于社会心理学的校园霸凌干预对策，是一个涉及多方面、多层次的综合性策略。这些对策主要针对校园霸凌现象的心理学成因，从个体、家庭、学校、社会等多个层面进行干预。', image: require("../../assets/images/9.jpg"), articleId: 3 },
    { title: '缓解考试焦虑，轻松应对考试', description: '缓解考试焦虑，是帮助学生调整心态、提升自信、优化备考策略的综合方法。它强调心理调适与实际行动的结合，确保学生以最佳状态应对考试，有效管理紧张情绪。', image: require("../../assets/images/10.jpg"), articleId: 4 },
    { title: '新时代学校心理健康教育工作应该如何开展？', description: '学校负责学生心理健康体系建设，统筹师资与课程，并协调家庭、社区、医院资源，全面开展心理健康工作，促进儿童青少年健康成长。', image: require("../../assets/images/11.jpg"), articleId: 5 },
    { title: '合力筑牢学生心理健康防线', description: '合力筑牢学生心理健康防线是一项系统工程，旨在通过整合家庭、学校、社会及政府等多方面的资源与力量，共同关注学生心理健康发展，预防和应对学生可能遇到的心理问题。', image: require("../../assets/images/12.jpg"), articleId: 6 },
  ];

  const staticCards = cardContents.map((content, i) => (
    <div key={i} className="card">
      <Link to={`/article/${content.articleId}`}>
        <Card
          hoverable
          style={{ width: '100%', height: '100%' }} // 确保 Card 的宽度为100%
          cover={<img alt={content.title} src={content.image} />}
        >
          <Meta
            title={content.title}
            description={<div style={{ textAlign: 'left' }}>{content.description}</div>}
            style={{ textAlign: 'center' }}
          />
        </Card>
      </Link>
    </div>
  ));

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  // 定义九个卡片的内容
  const cards = [
    { title: '学生信息查询', link: '/class/check', icon: <UserOutlined /> },
    { title: '家长信息登记', link: '/class/patriarch', icon: <TeamOutlined /> },
    { title: '心理测评', link: '/task/test', icon: <ScheduleOutlined /> },
    { title: '发布视频', link: '/task/publish', icon: <VideoCameraOutlined /> },
    { title: '发布推文', link: '/task/teacherpost', icon: <CheckCircleOutlined /> },
    { title: '教师留言', link: '/warn/TeacherMessage', icon: <BellOutlined /> },
    { title: '学生测评成绩', link: '/warn/view_inf', icon: <FileTextOutlined /> },
    { title: '个人中心', link: '/user', icon: <HomeOutlined /> },
    { title: '修改密码', link: '/warn', icon: <WarningOutlined /> },
  ]

  return (
    <div className="container" >
      <Layout>
        {/* 左侧轮播图 */}
        <Sider width={900} style={{ background: '#fff', padding: '20px', margin: "10px" }}>
          <Carousel autoplay className="carousel">
            <div>
              <img src={require("../../assets/images/slide1.jpg")} alt="轮播图片1" style={{ width: '100%', height: "500px" }} />
            </div>
            <div>
              <img src={require("../../assets/images/slide2.jpg")} alt="轮播图片2" style={{ width: '100%', height: "500px" }} />
            </div>
            <div>
              <img src={require("../../assets/images/slide3.jpg")} alt="轮播图片3" style={{ width: '100%', height: "500px" }} />
            </div>
            <div>
              <img src={require("../../assets/images/slide4.jpg")} alt="轮播图片4" style={{ width: '100%', height: "500px" }} />
            </div>
            <div>
              <img src={require("../../assets/images/slide5.jpg")} alt="轮播图片5" style={{ width: '100%', height: "500px" }} />
            </div>
            <div>
              <img src={require("../../assets/images/slide6.jpg")} alt="轮播图片6" style={{ width: '100%', height: "500px" }} />
            </div>
          </Carousel>
        </Sider>

        {/* 右侧卡片 */}
        <Content style={{ padding: '25px', background: '#fff', width: '400px', height: "555px", marginTop: '11px' }}>
          <div style={{ marginBottom: '10px', textAlign: 'left' }}>
            <Typography.Text strong style={{ fontSize: '18px', color: 'black' }}>
              快捷入口
            </Typography.Text>
          </div>
          <div className="card-grid">
            {cards.map((card, index) => (
              <Link key={index} to={card.link}>
                <Card
                  hoverable
                  className="custom-card"
                  style={{ width: '100px', height: '100px', marginTop: '10px', marginLeft: '15px' }} // 调整卡片大小
                  onClick={() => window.location.href = card.link}
                >
                  <div className="inner-card">
                    <div className="icon">{card.icon}</div>
                  </div>
                  <div className="text">{card.title}</div>
                </Card>
              </Link>
            ))}
          </div>
        </Content>
      </Layout>

      {/* 卡片内容 */}
      <div className="card-wrapper">
        {staticCards}
      </div>
    </div>
  );
};

export default Home;